<!--
 * @PageName: demo
 * @Description: 
 * @FilePath: /glm-mes-pc/src/views/Demo/index.vue
-->
<template>
	<div class="app-container glm" @click="handleClickOutside">
		<!-- 搜索区 -->
		<div class="common-search-container">
			<el-form :model="searchParams" ref="queryRef" label-width="auto">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item prop="orderNum" label="检品订单号">
							<el-input v-model.trim="searchParams.orderNum" @keyup.enter="getList" placeholder="请输入订单编号" clearable class="input-item" />
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item label="销售订单号" prop="saleOrderId">
							<el-input placeholder="请输入销售订单号" v-model.trim="searchParams.saleOrderId" @keyup.enter="handleQuery" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item label="款号" prop="styleNumber">
							<el-input placeholder="请输入款号" v-model.trim="searchParams.styleNumber" @keyup.enter="handleQuery" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="6" v-show="visible">
						<el-form-item label="物料名称" prop="materialName">
							<el-input placeholder="请输入物料名称" v-model.trim="searchParams.materialName" @keyup.enter="handleQuery" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="6" v-show="visible">
						<el-form-item label="检品公司" prop="inspectionComp">
							<el-input v-model.trim="searchParams.inspectionComp" @keyup.enter="getList" placeholder="请输入检品公司" clearable class="input-item" />
						</el-form-item>
					</el-col>

					<!-- 占位 -->
					<el-col :span="6" v-show="visible"></el-col>
					<el-col :span="6" v-show="visible"></el-col>

					<el-col :span="6">
						<div>
							<el-button @click="handleQuery" type="primary" icon="Search" :disabled="changeLock">搜索</el-button>
							<el-button @click="resetQuery" icon="Refresh" :disabled="changeLock">重置</el-button>
							<el-button @click="toggleVisible" v-show="!visible" icon="ArrowDownBold">展开</el-button>
							<el-button v-show="visible" @click="toggleVisible" icon="ArrowUpBold">收起</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div>
			<!-- 切换区 -->
			<el-tabs v-model="searchParams.orderStatus" @tabChange="handleSwitchTab">
				<el-tab-pane label="未接单" name="0" :disabled="changeLock" />
				<el-tab-pane label="已接单" name="1" :disabled="changeLock" />
			</el-tabs>
			<!-- 表格组件区 -->
			<TableComponent ref="tableChildRef" :queryParams="searchParams" :tableData="tableData" :loading="loading" :total="total" @pagination="getList" @sort="sort" :changeLock="changeLock" />
		</div>
	</div>
</template>

<script setup>
import { getPredictionInspectionListAPI } from '@/api/inspectionInfo.js'
import TableComponent from './components/tableComponent'
// 引入表格筛选组合式函数
import { useFilterManagement } from '@/utils/useFilterManagement'
const { showSinglePopover } = useFilterManagement()
const { proxy } = getCurrentInstance()
const visible = ref(false)
const tableChildRef = ref(null)
const searchParams = ref({
	pageNum: 1,
	pageSize: 50,
	orderByColumn: '',
	// 正序or倒序
	isAsc: '',
	// 检品订单号
	orderNum: '',
	saleOrderId: '',
	materialName: '',
	inspectionComp: '',
	orderStatus: '0'
})
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const changeLock = ref(false)

/* 展开收起 */
const toggleVisible = () => {
	visible.value = !visible.value
}

/* 搜索 */
const handleQuery = () => {
	searchParams.value.pageNum = 1
	getList(tableChildRef.value.storageFilterObject)
}

/* 重置 */
const resetQuery = () => {
	proxy.resetForm('queryRef')
	searchParams.value.orderByColumn = ''
	searchParams.value.isAsc = ''
	tableChildRef.value.clearSort()
	// 重置表格所有筛选条件
	tableChildRef.value.batchResetFilter()
	handleQuery()
}

/* 查询 */
const getList = async (filteParams = {}) => {
	loading.value = true
	changeLock.value = true
	const res = await getPredictionInspectionListAPI({ ...searchParams.value, ...filteParams })
	tableData.value = res.data.records
	total.value = res.data.total
	loading.value = false
	changeLock.value = false
}

/* 排序操作 */
const sort = (orderByColumn, isAsc) => {
	searchParams.value.pageNum = 1
	searchParams.value.pageSize = 50
	searchParams.value.orderByColumn = orderByColumn
	searchParams.value.isAsc = isAsc
	getList(tableChildRef.value.storageFilterObject)
	handleQuery()
}

/* 切换标签 */
const handleSwitchTab = (tab) => {
	searchParams.value.orderStatus = tab
	searchParams.value.orderByColumn = ''
	searchParams.value.isAsc = ''
	tableChildRef.value.clearSort()
	// 重置表格所有筛选条件
	tableChildRef.value.batchResetFilter()
	handleQuery()
}

/* 调用组合式函数：判断如果点击的区域不是筛选框，则隐藏筛选框 */
const handleClickOutside = (event) => {
	showSinglePopover(event, tableChildRef.value)
}

/* 根据增加的筛选条件查询 */
const addParamsAndGetList = (filteParams) => {
	getList(tableChildRef.value.storageFilterObject)
}

provide('grandFather', {
	addParamsAndGetList
})

onMounted(() => {
	getList()
})
</script>

<style lang="scss">
@import url('@/assets/styles/glm-element-ui.scss');
</style>
